<template>
    <div class="main">
        <el-skeleton animated :rows="8" :loading="data.isFisrt">
            <div style="padding-left: 20px;">
                <el-tabs v-model="data.request.activeTab" class="demo-tabs" @tab-click="event.handleClick">
                    <template v-for="item in data.request.parent" :key="item.id">

                        <el-tab-pane :label="item.name" :name="item.id">
                            <el-button type="primary" @click="event.add">添加</el-button>
                            <div style="width: calc(100vw - 280px);">
                                <el-table :data="data.data" v-loading="data.loading" style="width: 100%">
                                    <el-table-column label="序号" width="70" type="index">

                                    </el-table-column>
                                    <el-table-column label="类型名称" width="240px" :show-overflow-tooltip="true"
                                        prop="name">

                                    </el-table-column>
                                    <el-table-column label="创建时间" width="240px" :show-overflow-tooltip="true"
                                        prop="name">
                                        <template #default="scope">
                                            <el-tag type="success">{{ scope.row.createtime }}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="描述" width="240px" :show-overflow-tooltip="true" prop="name">
                                        <template #default="scope">
                                            <el-tag type="primary">{{ scope.row.explain == "" ? '无' : scope.row.explain
                                            }}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="数量" width="230px" :show-overflow-tooltip="true" prop="name">
                                        <template #default="scope">
                                            <el-tag type="primary">{{ scope.row.sumcount }}</el-tag>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="操作" width="230px" :show-overflow-tooltip="true" prop="name">
                                        <template #default="scope">
                                            <el-popconfirm @confirm="event.Delete(scope.row.id)" title="确认删除吗？">
                                                <template #reference>
                                                    <el-button :icon="Delete" type="danger" circle>
                                                    </el-button>
                                                </template>
                                            </el-popconfirm>
                                        </template>

                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                                <el-pagination background size="small" layout="prev, pager, next"
                                    v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit"
                                    :total="data.pages?.total" />
                            </div>
                        </el-tab-pane>
                    </template>
                </el-tabs>
            </div>


            <el-dialog v-model="data.dialogVisible">
                <el-descriptions title="新增类别" border direction="vertical" :column="1">
                    <el-descriptions-item label="类别名称" :span="1">
                        <el-input v-model="data.request.name"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="类别描述" :span="1">
                        <el-input v-model="data.request.explain"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="父级" :span="1" >
                        <el-select v-model="data.request.ptpid" placeholder="请选择">
                            <el-option v-for="item in data.request.parent" :key="item.id"
                                :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>

                    <el-descriptions-item label="操作" :span="1">
                        <el-popconfirm @confirm="event.addtype" title="确认要添加吗？">
                            <template #reference>
                                <el-button type="primary">新增</el-button>
                            </template>
                        </el-popconfirm>
                    </el-descriptions-item>

                </el-descriptions>

            </el-dialog>

        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import type { pro_type_Dto } from '@/Dto/Request/product/pro_type';
import { onMounted, reactive, watchEffect } from 'vue';
import { Calendar, Delete, Edit } from '@element-plus/icons-vue'
import { Add_Product_Type, Delete_Product_Type, Get_children_Table, Get_Product_Type } from '@/api/product';
import Api_Code from '@/Dto/Response/Api_code';
import { msg } from '@/utils/msg';
import { closeloading, startloading } from '@/utils/loading';
import { ElMessage } from 'element-plus';


const data = reactive<pro_type_Dto>({
    key: '',
    data: [],
    isFisrt: true,
    loading: false,
    request: {
        parent: [],
        activeTab: '',
        name: '',
        explain: '',
        ptpid: ''
    },
    pages: {
        page: 1,
        limit: 10,
        total: 0
    },
    dialogVisible: false,


})


const event = {

    async handleClick(tab: any) {
        data.request.activeTab = tab.props.name
        data.loading = true
        data.data = []
        methods.bind2()
    },
    add() {
        data.dialogVisible = true
    },
    async addtype() {
        if(data.request.name.trim()===''){
            ElMessage.error("请选择类型名称")
            return 
        }
        if(data.request.ptpid==""){
            ElMessage.error("请选择父级")
            return
        }
        startloading()
        const res = await Add_Product_Type({
            ...data.request
        })
        if (res.code === Api_Code.ok) {
            msg(res)
            methods.bind2()
            data.request.name=''
            data.request.explain=''
            data.request.ptpid=''
            data.dialogVisible=false
            closeloading()
        } else {
            msg(res)
            closeloading()
        }
    },

    async Delete(id: string) {
        data.loading = true
        const res = await Delete_Product_Type({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            msg(res)
            data.loading = false
            methods.bind2()
        } else {
            msg(res)
            data.loading = false
        }
    }

}

const methods = {
    //初始化绑定
    async bind() {
        data.loading = true
        const res = await Get_Product_Type()
        if (res.code === Api_Code.ok) {
            data.request.parent = res.data
            data.request.activeTab = res.data[0].id
            data.isFisrt = false
        }

    },
    async bind2() {
        //切换类型的绑定
        const res2 = await Get_children_Table({
            id: data.request.activeTab,
            page: data.pages?.page ?? 1,
            limit: data.pages?.limit ?? 10,
            key: data.key ?? ""
        })
        if (res2.code === Api_Code.ok) {
            data.data = res2.data.data
            data.pages!.total = res2.data.total
            data.loading = false

        }
    }

}

watchEffect(async () => {
    await methods.bind()
    await methods.bind2()
})


</script>

<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.main {
    width: 100%;
    height: calc(100vh - 150px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 8PX;
    position: absolute;
    background: #ffffff;
    border-radius:8px ;
}

.type_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.type_input {
    flex: 3;
    line-height: 50px;
}
</style>